<template>
	<picker-view v-if="visible" class="picker-view" :indicator-style="indicatorStyle" :value="defaultValue" @change="bindChange">
		<picker-view-column>
			<view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
		</picker-view-column>
	</picker-view>
</template>

<script>
	export default {
		props:{
			value: {
				type: String,
				default: ""
			},
			range: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				visible: false,
				indicatorStyle: `height: 50px;`,
				defaultValue: []
			}
		},
		mounted() {
			this.defaultValue = [this.value ? this.getIndex() : 0]
			this.visible = true
		},
		methods:{
			getValue(){
				return this.range[this.defaultValue[0]];
			},
			bindChange: function(e) {
				let val = e.detail.value
				this.defaultValue = [val[0]];
			},
			getIndex(){
				for (var i = 0; i < this.range.length; i++) {
					if(this.range[i] === this.value){
						return i
					}
				}
				return 0
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
		.item {
			height: 50px !important;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
</style>